<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>Bookshop</title>
	<link rel="stylesheet" href="/css/book.css">
</head>

<body>
	<div class="header">
		<% if (typeof isLoggedIn !=='undefined' && isLoggedIn) { %>
			<!-- 如果用户已登录，显示用户名和注销链接 -->
			<span class="username">Welcome, <%= username %>!</span>
			<a id="loginout" href="/loginout">退出登录</a>
			<% } else { %>
				<!-- 如果用户未登录，显示登录链接 -->
				<a id="loginout" href="/login">用户登录</a>
				<% } %>


					<div class="navheader"></div>
					<div class="nav">
						<div class="navList">

							<div <% if(cid==0) { %> class="active link" <% } else { %> class="link" <% } %>><a
											href="/">首页</a></div>

							<% for(let i=0;i<cataorys.length;i++){ %>
								<div <% if(cid==(i+1)) { %> class="active link" <% } else { %> class="link" <% } %>><a
												href="/category/<%=cataorys[i].id%>/page/1">
												<%=cataorys[i].category%>
											</a></div>

								<%}%>

									<div class="search">
										<input type="text" id="search">
										<button class="searchBtn"><span class="icon"></span><span
												class="text">搜索</span></button>
									</div>
						</div>
					</div>
	</div>
	<div class="contentMain">
		<div class="content">
			<div class="bookList">
				<% for(let i=0;i<books.length;i++){ %>
					<a href="/book/info/<%-books[i].id%>">
						<div class="bookItem">
							<img class="bookImg" src="<%-books[i].bookimg%>">
							<h3 class="title"><%-books[i].bookname%></h3>
							<p class="author"><%-books[i].author%></p>
							<div class="cataory"><%-books[i].cataory%></div>
						</div>
					</a>
					<%}%>

			</div>
			<div class="erweima">
				<img src="/img/2043.png"><br />
				<img src="/img/2116.png">
			</div>
		</div>
		<div class="fenpage">
			<div class="pageBtns">
				<% if(page>1){ %>
					<a <% if(searchInfo==0) { %> href="/category/<%=cid%>/page/<%=(page-1)%>" <% } else { %>
									href="/category/0/search/<%=searchInfo%>/page/<%=(page-1)%>" <% } %> >上一页</a>

					<!-- <a href="/category/<%=cid%>/page/<%=(page-1)%>">上一页</a> -->
					<% } %>

						<% for(let i=startPage;i<=endPage;i++){ %>
							<!-- <a <% if(page==i){ %> class="active" <%}%>  href="/category/<%=cid%>/page/<%=i%>"><%=i%></a> -->
							<a <% if(page==i){ %> class="active" <%}%>
									<% if(searchInfo==0){ %> href="/category/<%=cid%>/page/<%=i%>" <% }else{ %>
													href="/category/0/search/<%=searchInfo%>/page/<%=i%>" <% } %>><%=i%>
							</a>
							<%}%>

								<% if(page<pageAll){ %>
									<a <% if(searchInfo==0) { %> href="/category/<%=cid%>/page/<%=(page+1)%>" <% } else
													{ %> href="/category/0/search/<%=searchInfo%>/page/<%=(page+1)%>" <%
																} %> >下一页</a>
									<!-- <a href="/category/<%=cid%>/page/<%=(page+1)%>">下一页</a> -->
									<% } %>
			</div>
			<div class="allConut">共<%=pageAll%>页</div>


		</div>
	</div>

	<script>
		var searchBtn = document.querySelector(".searchBtn");
		searchBtn.onclick = function (e) {
			let value = document.querySelector("#search").value;
			if (value) {
				location.href = "/category/0/search/" + value + "/page/1";
			} else {
				location.href = "/category/0/page/1";
			}

		}
	</script>
</body>

</html>